<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>
            计算属性
        </title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 计算属性 -->
        <div id="root">
            <input type="text" v-model="xing"></input> <br/>
            <input type="text" v-model="ming"></input> <br/>
            <span>全名：{{fullName}} </span> <br/> <!--不建议写复杂函数-->
        </div>
        
    </body>
    <script type="text/javascript">
        const vm = new Vue({
            el: "#root",
            data:{
                xing: "王",
                ming: "五"
            },
            computed:{ // 计算属性
                fullName: {
                    get(){//this 指向的是vm， 调用时机： 1. 初次读取fullName， 然后被缓存， 2. 依赖的计算属性被更新。
                        return this.xing+"-"+this.ming
                    },
                    set(value){ // fullName被修改时调用set方法
                        const arr=value.split('-')
                        this.xing=arr[0]
                        this.ming=arr[1]
                    }
                }
            }
        })
    </script>
</html>